<template>
  <div class="content">
    <!-- form表单部分 -->
    <el-card shadow="always">
      <el-row :gutter="8">
        <el-form :inline="true" :model="formData" label-width="90px" size="medium">
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="快递员账号">
                <el-input v-model="formData.account" placeholder="请输入快递员账号" />
              </el-form-item>
            </el-col>
            <el-form-item label="所属机构">
              <el-select ref="selectTree" v-model="formData.agencyId" placeholder="请选择机构" clearable @clear="handleClear">
                <!-- v-if切换显示树形 true显示，false隐藏 -->
                <el-option hidden :value="formData.agencyId" :label="formData.agencyName" />
                <!-- expand-on-click-node默认为true，点击节点文字也能打开下拉框子项，false只能点击箭头才能打开。:check-on-click-node默认为false，点击节点前的复选框才能选中，为true则点击节点就能选中。 -->
                <el-tree accordion :data="agency" :props="{label:'name'}" :expand-on-click-node="false" :check-on-click-node="true" @node-click="handleNodeClick" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="快递员姓名">
                <el-input v-model="formData.name" placeholder="请输入快递员姓名" />
              </el-form-item>
            </el-col>
            <el-form-item style="padding-left:10px">
              <el-button type="danger" @click="onQuery">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-col :span="24">
              <el-form-item label="快递员手机号" label-width="100px">
                <el-input v-model="formData.phone" placeholder="请输入快递员手机号" />
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <!-- 列表显示部分 -->
    <el-card class="list">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="index"
          label="序号"
        />
        <el-table-column
          prop="account"
          label="快递员账号"
        />
        <el-table-column
          prop="name"
          label="快递员姓名"
        />
        <el-table-column
          prop="mobile"
          label="快递员电话"
        />

        <!-- <template v-slot="scope">
              {{ scope.row.userType }}
            </template> -->

        <el-table-column
          prop="agency.name"
          label="所属机构"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          :formatter="formatWorkeStatus"
        />
        <el-table-column
          label="操作"
          fixed="right"
          prop=""
        >
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <!-- <el-button type="text" size="small" @click="$router.push({path:`/employee/rangeAllocation`,params:{agencyName:scope.row.agency.name,id:scope.row.userId,name:scope.row.name}})">作业范围分配</el-button> -->
            <el-button type="text" size="small" @click="workTo(scope)">作业范围分配</el-button>

          </template>
        </el-table-column>

      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <!-- <span class="demonstration">调整每页显示条数</span> -->
        <el-pagination
          :current-page.sync="pageConfig.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageConfig.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import EmployeeEnum from '@/constant/employee'
import { getCourierPage } from '@/api/empolyee/courier'
import { getBussinessTree } from '@/api/empolyee/scheduling'
export default {
  data() {
    return {
      formData: {
        account: '', // 快递员账号
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        name: '', // 快递员姓名
        phone: ''// 快递员手机号
      },
      tableData: [],
      // 下拉框树形数据
      agency: [],
      pageConfig: {
        page: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.getCourierPage()
    // 获取树形结构下拉框
    this.getBussinessTree()
  },
  methods: {
    // 点击跳转页面
    workTo(scope) {
      console.log(144, scope)
      this.$router.push(`/employee/rangeAllocation/${scope.row.userId}`)
    },
    async   getBussinessTree() {
      let { data } = await getBussinessTree()
      if (data.data) {
        data = data.data
      }
      const tree = JSON.parse(data)
      console.log(188, tree)
      this.agency = tree
    },
    // 机构选中后的操作
    async   handleNodeClick(data) {
      console.log(151, data)
      //   console.log(96, data)可以获取到被点击的部门对象，包含部门名称name
      // 赋值给formdata
      this.formData.agencyId = data.id
      this.formData.agencyName = data.name
      console.log(this.$refs.selectTree)
      //  调用选择器的失去焦点方法实现隐藏效果
      this.$refs.selectTree.blur()
      // 根据机构查询快递员
      this.getCourierPage()
    },
    // 用户点击清空按钮时触发，清空数据
    handleClear() {
      this.formData.agencyId = ''
      this.formData.agencyName = ''
    },
    // 获取快递员分页数据。
    async getCourierPage() {
      const res = await getCourierPage({ ...this.pageConfig, ...this.formData })
      // console.log(167, res)
      // console.log(res)
      // this.tableData = res.data.data.items
      if (res.data.items) {
        // 处理序号，让每个员工都自带序号。
        this.tableData = res.data.items.map((item, index) => {
        // console.log(79,index)
          return {
            ...item, // 员工本来的数据
            index: (this.pageConfig.page - 1) * this.pageConfig.pageSize + index + 1
          }
        })
      } else {
        this.tableData = []
      }

      this.total = +res.data.counts
    },
    // 格式化员工角色
    formatWorkeStatus(row, col, val) {
      const res = EmployeeEnum.workStatus.find(item => item.id === val)
      return res ? res.value : '未知'
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 分页触发的函数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageConfig.pageSize = val
      this.getCourierPage()
    },
    handleCurrentChange(newpage) {
      // console.log(`当前页: ${val}`)
      this.pageConfig.page = newpage
      this.getCourierPage()
    },

    // 查询
    onQuery() {
      this.getCourierPage()
    },
    // 重置
    reset() {
      this.formData = {
        account: '', // 司机账号
        agencyId: '', // 所属机构
        agencyName: '', // 所属机构名称
        name: '', // 司机姓名
        phone: ''// 司机手机号
      }
      // 更新页面
      this.getCourierPage()
    },
    // 查看司机详情
    async   handleClick(id) {

    }
  }
}
</script>

<style>
.content{
  margin: 20px;
}
.block{
  display: flex;
  justify-content: center;
}
</style>
